<template>
  <view class="companyinfo-container">
    <!-- 统一设置内边盒子开始 -->
    <view class="padding-container">
      <view class="bgc">
        <!-- 背景盒子 -->
      </view>

      <!-- 公司展示图外盒子开始 -->
      <view class="tupian-container">
        <!-- 公司展示图内盒子开始 -->
        <view class="tupian-nei">
          <image :src="companyinfoList.images" mode=""></image>
        </view>
        <!-- 公司展示图内盒子结束 -->
      </view>
      <!-- 公司展示图外盒子结束 -->

      <!-- 公司信息盒子开始 -->
      <view class="companyinfocard ">
        <!-- 数据盒子开始 -->
        <view class="card-o box-padding">
          <view class="card-i">
            <view class="boxs">
              <!-- 左盒子 -->
              <view class="left box">
                <view class="">
                  1
                </view>
                <view class="">
                  注册家政员数
                </view>
              </view>
              <!-- 右盒子 -->
              <view class="right box">
                <view class="">
                  1000
                </view>
                <view class="">
                  已认证政员数
                </view>
              </view>

            </view>
            <!-- 按钮 -->
            <view class="guanzhu">
              <view class="anniu">
                关注
              </view>
            </view>
          </view>
        </view>
        <!-- 数据盒子结束 -->
        <!-- 业务盒子开始 -->
        <view class="yewu box-padding">
          <view class="yewu-i">
            <view class="title yewu-title ">
              业务范围
            </view>

            <view class="yewu-content">
              <!-- 盒子 -->
              <view class="box" v-for="(item,i) in companyinfoList.occupation" :key="i">
                <view class="img">
                  <image :src='item.icon' mode=""></image>
                </view>
                <view class="text">
                  {{item.title}}
                </view>

              </view>


            </view>
          </view>
        </view>
        <!-- 业务盒子结束 -->
        <!-- 公司展示盒子开始 -->
        <view class="company-zhanshi box-padding">
          <view class="zhanshi">
            <!-- tab栏切换开始 -->
            <view class="tabs">
              <view class="tab" @click="tabflag=true" :class="{active:tabflag===true}">
                <!-- <view class="tab" @click="tabflag=true"> -->
                公司资料
              </view>
              <!-- <view class="tab" @click="tabflag=false" :style="{border:(tabflag===false?'2rpx solid #3f51b5':'#fff')}"> -->
              <view class="tab" @click="tabflag=false" :class="{active:tabflag===false}">
                注册人员
              </view>
            </view>
            <!-- tab栏切换结束 -->

            <!-- 图片展示区开始 -->
            <view class="tupianboxs">
              <!-- 1 -->
              <view class="tupianbox">
                <view class="title tupian-title">
                  公司资质
                </view>
                <view class="tupians">
                  <view class="tupian" v-for="(item,i) in companyinfoList.occupation" :key="i">
                    <image :src="item.icon" mode=""></image>
                  </view>
                </view>
              </view>

              <!-- 2 -->
              <view class="tupianbox">
                <view class="title tupian-title">
                  办公环境
                </view>
                <view class="tupians">
                  <view class="tupian" v-for="(item,i) in companyinfoList.occupation" :key="i">
                    <image :src="item.icon" mode=""></image>
                  </view>
                </view>
              </view>

              <!-- 3 -->
              <view class="tupianbox">
                <view class="title tupian-title">
                  获得荣誉
                </view>
                <view class="tupians">
                  <view class="tupian" v-for="(item,i) in companyinfoList.occupation" :key="i">
                    <image :src="item.icon" mode=""></image>
                  </view>
                </view>
              </view>

              <!-- 4 -->
              <view class="tupianbox">
                <view class="title tupian-title">
                  团队风采
                </view>
                <view class="tupians">
                  <view class="tupian" v-for="(item,i) in companyinfoList.occupation" :key="i">
                    <image :src="item.icon" mode=""></image>
                  </view>
                </view>
              </view>

            </view>
            <!-- 公司介绍区域开始 -->
            <view class="jieshao box-padding">
              <view class="title">
                公司介绍
              </view>
              <view class="text">
                {{companyinfoList.company_introduction}}
              </view>
            </view>
            <!-- 公司介绍区域结束 -->

          </view>
          <!-- 图片展示区结束 -->
         
        </view>
        <!-- 固定底部开始 -->
        <view class="guding">
          <view class="hehe">
          <uni-icons type="redo-filled" size="30"></uni-icons>  
           <view class="">
             分享
           </view>
          </view>
          <view class="hehe">  
          <uni-icons type="weixin" size="30"></uni-icons> 
            <view class="">
              微信联系
            </view>
          </view> 
          <view class="hehe">  
          <uni-icons type="phone-filled" size="30"></uni-icons>
          <view class="">
            电话 
          </view>
          </view>
          
        </view>
        <!-- 固定底部结束 -->
      </view>
      <!-- 公司展示盒子结束 -->
    </view>
    <!-- 公司信息盒子结束 -->

  </view>
  <!-- 统一设置内边盒子结束 -->


  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 公司标识符id
        companyid: "",
        // 公司详情数据
        companyinfoList: [],
        // tab切换高亮属性
        tabflag: true,



      };
    },
    

    
    onLoad(options) {
      console.log("跳转公司详情页的数据携带id标识符", options);
      this.companyid = options.query
      console.log("保存公司id数据", this.companyid);
      this.getCompanyinfoList()
    },
    // 获取公司详情的数据
    methods: {
      // 获取公司详情数据的方法
      async getCompanyinfoList() {
        const {
          data: res
        } = await uni.$http.get(`/mock/634a093fba6bdb4f54a8652d/domesticplatform/home/company/${this.companyid}`)
        console.log("获取公司详情到数据", res);
        this.companyinfoList = res.data.message[0]
        console.log("存入月嫂数据", this.companyinfoList);
      }

    }
  }
</script>

<style lang="scss">
  .companyinfo-container {

    background-color: #f5f5f5;


    .padding-container {
      position: relative;
      height: 300rpx;

      .bgc {
        height: 100rpx;
        background-color: #3f51b5;
      }

      // background-color: #000;
      .tupian-container {
        position: absolute;
        left: 38rpx;
        top: 0rpx;
        margin-bottom: 50rpx;

        .tupian-nei {
          width: 674rpx;
          height: 342rpx;

          // background-color: pink;
          image {
            width: 674rpx;
            height: 342rpx;
          }
        }
      }

      // 公司信息盒子
      .companyinfocard {
        position: absolute;
        top: 360rpx;
        left: 0;

        .card-o {
          .card-i {
            width: 674rpx;
            height: 292rpx;
            background-color: #fff;

            // background-color: pink;
            .boxs {
              width: 100%;
              height: 60%;
              display: flex;

              .box {
                width: 50%;
                height: 100%;
                // background-color: green;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
              }

              .right {
                position: relative;

                &::before {
                  position: absolute;
                  left: 0;
                  content: "";
                  width: 0;
                  height: 48rpx;
                  border-left: #3f51b5 2rpx solid;
                }
              }
            }

            .guanzhu {
              width: 100%;
              height: 40%;
              display: flex;
              justify-content: center;
              align-items: center;

              .anniu {
                border-radius: 1em;
                background-color: #3f51b5;
                padding: 0 30rpx;
                color: #fff;
              }
            }
          }

        }

        // 业务盒子
        .yewu {
          margin: 20rpx 0;

          .yewu-i {
            height: 324rpx;
            width: 674rpx;
            background-color: #fff;

            .yewu-title {
              padding: 0 20rpx;
              height: 108rpx;
              line-height: 108rpx;
              border-bottom: 2rpx solid #f0eeee;
            }

            .yewu-content {
              height: 214rpx;
              // background-color: aqua;
              display: flex;
              padding: 32rpx 20rpx 0 20rpx;

              .box {
                &:nth-child(2) {
                  margin: 0 54rpx;
                }

                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                .img {
                  width: 100rpx;
                  height: 100rpx;
                  // background-color: palegreen;
                  border-radius: 50%;

                  image {
                    width: 100rpx;
                    height: 100rpx;
                  }
                }

              }
            }

          }

        }

        // 公司展示盒子
        .company-zhanshi {
          margin-bottom: 170rpx;

          .zhanshi {
            width: 674rpx;
            // height: 1776rpx;
            background-color: #fff;

            // tab栏切换
            .tabs {
              width: 674rpx;
              height: 100rpx;
              display: flex;
              box-sizing: border-box;
              justify-content: space-between;
              border-bottom: 2rpx solid #f0eeee;

              .tab {
                // background-color: palegreen;
                width: 50%;
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                // border-bottom: 2rpx solid #3f51b5;
              }
            }

            // 图片展示区域
            .tupianboxs {
              padding: 40rpx 24rpx;

              .tupianbox {
                .tupian-title {
                  margin-bottom: 26rpx;
                }

                .tupians {
                  display: flex;

                  .tupian {
                    width: 200rpx;
                    height: 148rpx;

                    // background-color: pink;
                    &:nth-child(2) {
                      margin: 0 12rpx;
                    }

                    image {
                      width: 200rpx;
                      height: 148rpx;
                    }
                  }
                }
              }
            }

            // 公司介绍区域
            .jieshao {
              .text {
                font-size: 28rpx;
              }
            }
          }
        }

        // 固定底部
        .guding{
          position: fixed;
          left: 0;
          bottom: 0;
          width: 750rpx;
          height: 136rpx;
          background-color: #fff;
          display: flex;
          .hehe{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 33.33%;
            height: 100%;
          }
        }
      }


    }

  }
</style>
